<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Single Page</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: grey;
            display: none;
        }
    </style>
    <script>
        let index = 0;
        const indexs = [0, 1, 2, 3, 4];

        function showNextPage(page) {
            if (!(index in indexs)) {
                index = 0;
            }
            document.querySelectorAll("div").forEach(div => {
                div.style.display = 'none';
            })
            document.querySelector(`#${page}` + index).style.display = 'block';
            index++
        }

        function showPage(page) {
            document.querySelectorAll("div").forEach(div => {
                div.style.display = 'none';
            })
            document.querySelector(`#${page}`).style.display = 'block';
        }

        document.addEventListener("DOMContentLoaded", () => {
            document.querySelectorAll('button').forEach(button => {

                if (!button.dataset.page) {
                    return;
                }
                button.onclick = function () {
                    showPage(this.dataset.page);
                }
            })
        })
    </script>
</head>
<body>
<button onclick="showNextPage('page')">next Page</button>
<br>
<button data-page="page0">next Page1</button>
<button data-page="page1">next Page1</button>
<button data-page="page2">next Page2</button>
<button data-page="page3">next Page3</button>
<button data-page="page4">next Page4</button>
<div id="page0">
    <h1>This is page0.</h1>
</div>
<div id="page1">
    <h1>This is page1.</h1>
</div>
<div id="page2">
    <h1>This is page2.</h1>
</div>
<div id="page3">
    <h1>This is page3.</h1>
</div>
<div id="page4">
    <h1>This is page4.</h1>
</div>

</body>
</html>